/**
 * 根据父级拖拽宽度百分比的指令
 *
 * 该指令用于实现一个元素宽度根据拖拽操作动态改变的功能，并根据拖拽的百分比决定另一个属性是否为真。
 * 它通过监听鼠标mousedown、mousemove和mouseup事件来实现拖拽操作，并相应地更新元素的宽度和高度。
 */
export default {
  bind(el, binding) {
    // 当鼠标按下时，开始监听鼠标移动和松开事件
    el.addEventListener("mousedown", (e) => {
      // 根据绑定值中的dragId查找需要拖拽的元素
      // 验证元素是否存在
      const _mapDrag = document.getElementById(binding.value.dragId);
      // 如果找不到对应元素，则输出错误并返回
      if (!_mapDrag) {
        console.error(`Element with ID ${binding.value.dragId} not found.`);
        return;
      }

      // 阻止事件冒泡，避免影响父元素的事件处理
      e.stopPropagation();

      // 在拖拽开始时，获取父元素和拖拽元素的初始宽度
      // 使用原生方法计算宽度，以减少对jQuery的依赖
      const parentWidth = _mapDrag.parentElement.offsetWidth;
      const elementWidth = _mapDrag.offsetWidth;

      // 定义鼠标移动时的事件处理函数
      function mousemove(mousemoveEvent) {
        // 如果特定条件满足，则不执行拖拽逻辑
        if (binding.value.that?.main === 2) {
          return false;
        }
        // 计算当前拖拽元素应该占据的百分比宽度，确保不小于0
        // 确保计算过程中不会出现负值
        const wp = Math.max(
          ((elementWidth + e.clientX - mousemoveEvent.clientX) / parentWidth) *
            100,
          0
        );
        // 根据宽度百分比决定是否触发isZoomIn属性的更新
        if (wp >= 50) {
          binding.value.that?.$emit("update:isZoomIn", true);
        } else {
          binding.value.that?.$emit("update:isZoomIn", false);
        }
        // 更新拖拽元素的宽度和高度
        _mapDrag.style.width = `${wp}%`;
        _mapDrag.style.height = `${wp}%`;
      }
      // 监听鼠标移动事件
      document.addEventListener("mousemove", mousemove);

      // 定义鼠标松开时的事件处理函数
      function mouseup() {
        // 移除鼠标移动和松开事件的监听
        document.removeEventListener("mousemove", mousemove);
        document.removeEventListener("mouseup", mouseup);
        // 设置特定标志，表示拖拽操作已完成
        let tempThat = binding.value.that;
        if (tempThat) {
          tempThat.flag = true;
        }
      }
      // 监听鼠标松开事件
      document.addEventListener("mouseup", mouseup);
    });
  },
};
